<template>
  <div class="all">
    <div class="person">
      <div @click="login">
        <el-avatar :size="70" :src="$baseUrl+$store.state.userInfo.profile" v-if="$store.state.userInfo.uname"></el-avatar>
        <el-avatar :size="70" :src="$baseUrl+'user.png'" v-else></el-avatar>
      </div>
      <div @click="login">
        <p v-if="$store.state.userInfo.uname">{{uname}}</p>
        <p v-else>请登录用户</p>
      </div>
    </div>
    <div class="order">
      <div class="top">
        <span>我的订单</span>
        <i class="el-icon-arrow-right"></i>
      </div>
      <div>
        <el-row>
          <el-col :span="4">
            <i class="el-icon-wallet"></i>
            <span>待付款</span>
          </el-col>
          <el-col :span="4">
            <i class="el-icon-box"></i>
            <span>待发货</span>
          </el-col>
          <el-col :span="4">
            <i class="el-icon-truck"></i>
            <span>已发货</span>
          </el-col>
          <el-col :span="5">
            <i class="el-icon-s-claim"></i>
            <span>交易完成</span>
          </el-col>
          <el-col :span="5">
            <i class="el-icon-s-release"></i>
            <span>交易关闭</span>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="item">
      <ul>
        <li>
          <i class="el-icon-s-order"></i>
          <span>我的表单</span>
          <i class="el-icon-arrow-right"></i>
        </li>
        <li>
          <i class="el-icon-position"></i>
          <span>我的会员卡</span>
          <i class="el-icon-arrow-right"></i>
        </li>
        <li>
          <i class="el-icon-coin"></i>
          <span>我的积分</span>
          <i class="el-icon-arrow-right"></i>
        </li>
        <li>
          <i class="el-icon-money"></i>
          <span>我的优惠券</span>
          <i class="el-icon-arrow-right"></i>
        </li>
        <li>
          <i class="el-icon-medal"></i>
          <span>我的余额</span>
          <i class="el-icon-arrow-right"></i>
        </li>
        <li>
          <i class="el-icon-sold-out"></i>
          <span>我的砍价</span>
          <i class="el-icon-arrow-right"></i>
        </li>
        <li>
          <i class="el-icon-document-copy"></i>
          <span>我的拼团</span>
          <i class="el-icon-arrow-right"></i>
        </li>
        <li>
          <i class="el-icon-phone-outline"></i>
          <span>推广员中心</span>
          <i class="el-icon-arrow-right"></i>
        </li>
        <li>
          <i class="el-icon-more-outline"></i>
          <span>分销中心</span>
          <i class="el-icon-arrow-right"></i>
        </li>
        <li>
          <i class="el-icon-location-outline"></i>
          <span>收货人地址</span>
          <i class="el-icon-arrow-right"></i>
        </li>
        <li>
          <i class="el-icon-s-shop"></i>
          <span>申请开店</span>
          <i class="el-icon-arrow-right"></i>
        </li>
        <li>
          <i class="el-icon-s-custom"></i>
          <span>团长中心</span>
          <i class="el-icon-arrow-right"></i>
        </li>
        <li @click="exit()">
          <i class="el-icon-switch-button"></i>
          <span>退出登录</span>
          <i class="el-icon-arrow-right"></i>
        </li>
      </ul>
    </div>
    <div class="bottom">
      <div>
        <img src="../../assets/images/logo.png">
        <span>智能商城</span>
      </div>
      <span>由智能商城提供技术支持</span>
    </div>
  </div>
</template>
<script>
export default {
  data:function(){
    return {
      uname:this.$store.state.userInfo.uname,
    }
  },
  methods:{
    login(){
      this.$router.push("/login");
    },
    //用户退出登入
    exit(){
      this.$http.post('api/users/exit',{uname:this.$store.state.userInfo.uname}).then();
      this.$store.commit("exitUser");
    }
  },
}
</script>
<style lang="scss" scoped>
.all{
  background-color: #F4F4F4;
  height: 150vh;
}
.person{
  height: 160px;
  background-color: #FEAA64;
  // position: relative;
  display: flex;
  align-items: center;
  span{
    margin-left: 20px;
  }
  div{
    margin-left: 20px;
  }
}
.order,.item{
  padding: 0 10px;
  margin: 10px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0px 0px 6px -2px #666;
}
.order{
  height: 120px;
  div.top{
    height: 20px;
    line-height: 20px;
    border-bottom: 1px solid #F2F2F6;
    padding: 10px 0;
    i:last-child{
      float: right;
    }
  }
  div:last-child{
    .el-row{
      height: calc(120px - 41px);
      display: flex;
      justify-content: space-around;
      .el-col{
        height:100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    }
    // ul{
    //   width: 375px;
    //   display: flex;
    //   align-items: center;
    //   li{
    //     flex: 0 0 80px;
    //     display: flex;
    //     flex-direction: column;
    //     justify-content: center;
    //     align-items: center;
    //   }
    // }
  }
}
.item{
  ul>li{
    height: 20px;
    line-height: 20px;
    padding: 15px 0;
    color: #4F4F4F;
    border-bottom: 1px solid #F2F2F6;
    i:last-child{
      float: right;
    }
  }
}
.bottom{
  text-align: center;
  margin-top: 20px;
  color: #BFBFC3;
  div:first-child{
    width: 100px;
    margin: 0 auto;
    img{
      height: 20px;
      width: 20px;
      filter:grayscale(0.9);
      // float: left;
      vertical-align: bottom;
    }
  }

}
</style>